/* ============================================
   Pixia - Shared Theme Layer
   ------------------------------------------------------------
   Loaded on EVERY page, immediately after css/style.css and before
   the page-specific sheet, so it sits above the shared base but
   still lets a template finish its own layout.

   index.html defines the look (formerly in home.css). This file
   hoists that design system into shared tokens and applies it to
   the remaining page templates (.navbar / .btn / .footer), so no
   page has its own private theme.

   Anything restated in a page sheet (tool.css / pages.css /
   ai-tool.css) wins, so keep component styling there and keep only
   site-wide tokens and shared chrome here.
   ============================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  /* radii - the homepage scale */
  --px-radius-xl: 28px;
  --px-radius-lg: 20px;
  --px-radius-md: 14px;
  --px-radius-sm: 10px;
  --px-radius-full: 9999px;
  --px-ring: 0 0 0 1px var(--glass-border);
  --px-ring-hover: 0 0 0 1px var(--accent-primary);
  --px-shadow: 0 18px 50px -24px rgba(0, 0, 0, .45);
  --px-shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .6);
  --px-glow: 0 0 60px -18px rgba(255, 152, 0, .55);
  --px-ease: cubic-bezier(.22, .61, .36, 1);
  --px-container: 1300px;

  /* ambient background, shared by .px-bg / .bg-mesh / .at-bg */
  --px-ambient:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 152, 0, .18), transparent 62%),
    radial-gradient(900px 560px at 8% 12%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(6, 182, 212, .14), transparent 62%);

  /* Re-point the legacy scale at the homepage scale. The ~120
     var(--border-radius-*) / var(--shadow-*) / var(--transition-*)
     call sites in tool.css and pages.css then adopt the new
     geometry, shadows and easing with no per-file edits. */
  --border-radius-sm: var(--px-radius-sm);
  --border-radius-md: var(--px-radius-md);
  --border-radius-lg: var(--px-radius-lg);
  --border-radius-xl: var(--px-radius-xl);
  --border-radius-full: var(--px-radius-full);
  --shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, .35);
  --shadow-md: var(--px-shadow);
  --shadow-lg: var(--px-shadow-lg);
  --shadow-glow: var(--px-glow);
  --transition-fast: .2s var(--px-ease);
  --transition-base: .25s var(--px-ease);
  --transition-slow: .4s var(--px-ease);
  --transition-spring: .5s var(--px-ease);
  --container-max: var(--px-container);

  /* legacy mesh gradient now resolves to the shared ambient */
  --gradient-mesh: var(--px-ambient);

  /* AI tool pages kept their own radius scale; align it too. */
  --at-radius-xl: var(--px-radius-xl);
  --at-radius-lg: var(--px-radius-lg);
  --at-radius-md: var(--px-radius-md);
  --at-ring: var(--px-ring);
  --at-shadow: var(--px-shadow);
  --at-ease: var(--px-ease);

  /* ---- Compat aliases -----------------------------------------
     A handful of pages carry inline <style> blocks that reference
     --primary / --primary-dark / --border-color. Those were never
     defined, so every declaration using them was invalid and fell
     back to inherited values. They are mapped here, once, so the
     inline styles resolve against the shared accent instead. */
  --primary: var(--accent-primary);
  --primary-dark: #e08600;
  --border-color: var(--glass-border);
}

[data-theme="light"] {
  --px-ambient:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 152, 0, .22), transparent 62%),
    radial-gradient(900px 560px at 8% 12%, rgba(139, 92, 246, .12), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(6, 182, 212, .1), transparent 62%);
}

/* Anchor targets clear the fixed navbar on every template. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

/* ------------------------------------------------------------
   2. Ambient background
   One look for the homepage (.px-bg), the classic templates
   (.bg-mesh) and the AI pages (.at-bg).
   ------------------------------------------------------------ */
.px-bg,
.bg-mesh,
.at-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--px-ambient);
}

.px-bg::after,
.bg-mesh::after,
.at-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--glass-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  opacity: .5;
}

/* The old indigo blur blobs and film grain are replaced by the
   ambient gradient + grid above. */
.mesh-gradient,
.grain-overlay {
  display: none;
}

/* ------------------------------------------------------------
   3. Navbar
   ------------------------------------------------------------ */
.navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--nav-height);
  z-index: 1000;
  border-block-end: 1px solid transparent;
  transition: background .3s var(--px-ease), box-shadow .3s var(--px-ease), border-color .3s var(--px-ease);
}

.navbar.scrolled {
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-block-end-color: var(--glass-border);
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, .6);
}

.nav-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text-primary);
}

/* Canonical mark: the amber gradient tile with the outline document
   glyph used on the homepage and the AI pages. The 40 classic
   templates used to inline their own violet gradient badge, which is
   why the header looked different on inner pages. */
.logo-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9800, #ffc947);
  color: #1b1408;
  box-shadow: var(--px-glow);
  transition: transform .35s var(--px-ease);
}

.logo-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.nav-logo:hover .logo-icon {
  transform: rotate(-8deg) scale(1.06);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.logo-accent {
  color: var(--accent-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}

.nav-link {
  padding: 9px 14px;
  border-radius: var(--px-radius-sm);
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 500;
  transition: color .2s var(--px-ease), background .2s var(--px-ease);
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--glass-bg);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  transition: all .25s var(--px-ease);
}

.theme-toggle:hover {
  color: var(--accent-primary);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
}

/* The sun/moon pair is inverted between the two legacy sheets;
   the homepage reading is the reference (icon shows current mode). */
html[data-theme="dark"] .theme-toggle .sun-icon,
html[data-theme="light"] .theme-toggle .moon-icon {
  display: none;
}

.mobile-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  z-index: 10;
}

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--px-radius-full);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  gap: 9px;
  transition: transform .25s var(--px-ease), box-shadow .25s var(--px-ease), filter .25s var(--px-ease), background .2s var(--px-ease), border-color .2s var(--px-ease);
}

.btn-primary {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(255, 152, 0, .8);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -16px rgba(255, 152, 0, .85);
  filter: none;
}

.btn-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-hover);
  color: var(--text-primary);
}

.btn-glass:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-primary);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .5);
}

.btn-ghost {
  color: var(--text-secondary);
  border-radius: var(--px-radius-full);
}

.btn-white {
  border-radius: var(--px-radius-full);
}

.btn-lg {
  padding: 16px 30px;
  font-size: 16px;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------ */
.footer {
  border-block-start: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
  padding: 62px 0 34px;
}

.footer-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 34px;
  margin-block-end: 46px;
}

.footer-brand .nav-logo {
  margin-block-end: 16px;
}

.footer-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.7;
  margin-block-end: 20px;
}

.social-links {
  display: flex;
  gap: 10px;
}

.social-link {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.footer-links h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-block-end: 16px;
}

.footer-links ul {
  display: grid;
  gap: 10px;
}

.footer-links li {
  margin-block-end: 0;
}

.footer-links a {
  font-size: 14px;
  color: var(--text-tertiary);
}

.footer-links a:hover {
  color: var(--accent-primary);
}

.footer-bottom {
  border-block-start: 1px solid var(--glass-border);
  padding-block-start: 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   6. Section chrome
   ------------------------------------------------------------ */
/* --bg-card is a background token; using it for the label text
   rendered white-on-amber in light mode. */
.section-tag {
  color: #1b1408;
  background: var(--accent-primary);
  border-color: transparent;
}

.section-title {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------
   7. Selection
   ------------------------------------------------------------ */
::selection {
  background: rgba(255, 152, 0, .3);
  color: var(--text-primary);
}

/* ------------------------------------------------------------
   8. Focus visibility
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   9. Responsive - mobile nav breakpoint aligned to the homepage
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    inset-block-end: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 84px 20px 28px;
    margin-inline: 0;
    background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--px-ease), transform .25s var(--px-ease), visibility .25s;
    z-index: 5;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links .nav-link {
    font-size: 17px;
    padding: 12px 16px;
    border-radius: var(--px-radius-md);
  }

  .nav-actions .btn-ghost,
  .nav-actions .btn-primary {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}